iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
1
Modern Web

連續30天的超實務網頁設計的垂直置中教學系列 第 15

使用 Grid + align-self 達到垂直置中效果

  • 分享至 

  • xImage
  •  

簡言

align-self 應該大家都不陌生,基本上就是對 grid Y軸的個別對齊方式,只要對單一子層物件設定 align-self: center 就能達成垂直置中的目的了。

原理說明

在我們昨天的說明中有提到 Flex 跟 Grid 都有同樣的的屬性,而這個 align-self 就是其中之一啦,跟 Flex 的作用差不多,在 Grid 中就是設定在子物件本身做Y軸的對齊啦,原理不難,大概就這樣了(好短的介紹阿XD)

<div class="box box15">
  <div class="content">
    立馬來看 Amos 實際完成的
    <a href="http://csscoke.com/2015/07/31/nth-child_rwd_album/">
      CSS3精美相簿效果
    </a>
    效果吧!別忘了拖拉一下視窗看看 RWD 效果喔!
  </div>
</div>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
  display: grid;
  justify-content: center;
}
.content{
  width: 400px;
  background: #ccc;
  align-self: center;
}

實際示範頁面

Line搜尋「@csscoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
本文同步發表於 CSS可樂部落格
CSS coke的Youtube直播頻道
歡迎點擊右側訂閱 CSS coke直播頻道
若有任何問題歡迎留言討論喔
謝謝各位


上一篇
使用 Grid + align-content 做垂直置中
下一篇
使用 Grid + place-items 來做垂直置中效果
系列文
連續30天的超實務網頁設計的垂直置中教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言